<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识点记忆助手</title>
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6b8cbc;
            --accent-color: #ff7e5f;
            --light-color: #f5f7fa;
            --dark-color: #2c3e50;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
            padding: 10px;
            max-width: 100%;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 15px 0;
            background-color: var(--primary-color);
            color: white;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 1.8rem;
        }
        
        .nav-tabs {
            display: flex;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .tab-content {
            display: none;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
            width: 100%;
        }
        
        button:hover {
            background-color: var(--secondary-color);
        }
        
        button.danger {
            background-color: var(--danger-color);
        }
        
        button.danger:hover {
            background-color: #c0392b;
        }
        
        .card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .card-title {
            font-weight: bold;
            font-size: 1.1rem;
        }
        
        .card-category {
            background-color: var(--secondary-color);
            color: white;
            padding: 3px 8px;
            border-radius: 15px;
            font-size: 0.8rem;
        }
        
        .card-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .card-actions button {
            flex: 1;
            padding: 8px;
            font-size: 0.9rem;
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #777;
        }
        
        .progress-bar {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--success-color);
            border-radius: 5px;
        }
        
        .review-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin-bottom: 20px;
        }
        
        .review-question {
            font-size: 1.2rem;
            margin-bottom: 20px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .review-answer {
            font-size: 1rem;
            margin-bottom: 20px;
            min-height: 60px;
            display: none;
            background-color: var(--light-color);
            padding: 15px;
            border-radius: 5px;
        }
        
        .review-actions {
            display: flex;
            gap: 10px;
        }
        
        .review-actions button {
            flex: 1;
        }
        
        .empty-state {
            text-align: center;
            padding: 30px;
            color: #777;
        }
        
        @media (max-width: 480px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>知识点记忆助手</h1>
        </header>
        
        <div class="nav-tabs">
            <div class="tab active" data-tab="add">添加知识点</div>
            <div class="tab" data-tab="review">复习</div>
            <div class="tab" data-tab="stats">统计</div>
            <div class="tab" data-tab="manage">管理</div>
        </div>
        
        <!-- 添加知识点标签页 -->
        <div class="tab-content active" id="add">
            <h2>添加新知识点</h2>
            <form id="knowledge-form">
                <div class="form-group">
                    <label for="question">问题/标题</label>
                    <input type="text" id="question" required>
                </div>
                <div class="form-group">
                    <label for="answer">答案/内容</label>
                    <textarea id="answer" required></textarea>
                </div>
                <div class="form-group">
                    <label for="category">分类</label>
                    <input type="text" id="category" placeholder="例如: 数学, 历史, 编程...">
                </div>
                <button type="submit">保存知识点</button>
            </form>
        </div>
        
        <!-- 复习标签页 -->
        <div class="tab-content" id="review">
            <h2>复习知识点</h2>
            <div id="review-container">
                <div class="empty-state" id="no-cards-message">
                    <p>暂无知识点可复习，请先添加一些知识点。</p>
                </div>
                <div class="review-card" id="review-card" style="display: none;">
                    <div class="review-question" id="review-question"></div>
                    <div class="review-answer" id="review-answer"></div>
                    <div class="review-actions">
                        <button id="show-answer">显示答案</button>
                        <button id="next-card" style="display: none;">下一个</button>
                    </div>
                    <div class="review-actions" id="difficulty-buttons" style="display: none;">
                        <button class="difficulty-btn" data-difficulty="easy">简单</button>
                        <button class="difficulty-btn" data-difficulty="medium">一般</button>
                        <button class="difficulty-btn" data-difficulty="hard">困难</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计标签页 -->
        <div class="tab-content" id="stats">
            <h2>学习统计</h2>
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-value" id="total-cards">0</div>
                    <div class="stat-label">总知识点</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="reviewed-today">0</div>
                    <div class="stat-label">今日复习</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="mastered-cards">0</div>
                    <div class="stat-label">已掌握</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="due-cards">0</div>
                    <div class="stat-label">待复习</div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <h3>分类统计</h3>
                <div id="category-stats"></div>
            </div>
        </div>
        
        <!-- 管理标签页 -->
        <div class="tab-content" id="manage">
            <h2>管理知识点</h2>
            <div id="knowledge-list"></div>
        </div>
    </div>

    <script>
        // 数据模型
        class KnowledgeCard {
            constructor(id, question, answer, category) {
                this.id = id;
                this.question = question;
                this.answer = answer;
                this.category = category || '未分类';
                this.createdAt = new Date().toISOString();
                this.lastReviewed = null;
                this.nextReview = new Date().toISOString(); // 默认立即复习
                this.difficulty = 'medium'; // easy, medium, hard
                this.reviewCount = 0;
                this.correctCount = 0;
                this.mastered = false;
            }
        }

        // 应用状态
        const state = {
            cards: [],
            currentCardIndex: 0,
            reviewMode: false
        };

        // DOM 元素
        const elements = {
            tabs: document.querySelectorAll('.tab'),
            tabContents: document.querySelectorAll('.tab-content'),
            knowledgeForm: document.getElementById('knowledge-form'),
            questionInput: document.getElementById('question'),
            answerInput: document.getElementById('answer'),
            categoryInput: document.getElementById('category'),
            reviewContainer: document.getElementById('review-container'),
            reviewCard: document.getElementById('review-card'),
            reviewQuestion: document.getElementById('review-question'),
            reviewAnswer: document.getElementById('review-answer'),
            showAnswerBtn: document.getElementById('show-answer'),
            nextCardBtn: document.getElementById('next-card'),
            difficultyButtons: document.getElementById('difficulty-buttons'),
            knowledgeList: document.getElementById('knowledge-list'),
            totalCards: document.getElementById('total-cards'),
            reviewedToday: document.getElementById('reviewed-today'),
            masteredCards: document.getElementById('mastered-cards'),
            dueCards: document.getElementById('due-cards'),
            categoryStats: document.getElementById('category-stats'),
            noCardsMessage: document.getElementById('no-cards-message')
        };

        // 初始化应用
        function init() {
            loadCards();
            setupEventListeners();
            renderManageTab();
            updateStats();
            
            // 默认显示第一个标签页
            switchTab('add');
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 标签页切换
            elements.tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    switchTab(tabId);
                });
            });

            // 表单提交
            elements.knowledgeForm.addEventListener('submit', handleFormSubmit);

            // 复习功能
            elements.showAnswerBtn.addEventListener('click', showAnswer);
            elements.nextCardBtn.addEventListener('click', nextCard);
            
            // 难度选择
            document.querySelectorAll('.difficulty-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const difficulty = e.target.getAttribute('data-difficulty');
                    rateCard(difficulty);
                });
            });
        }

        // 切换标签页
        function switchTab(tabId) {
            // 更新标签页状态
            elements.tabs.forEach(tab => {
                if (tab.getAttribute('data-tab') === tabId) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });

            // 更新内容区域
            elements.tabContents.forEach(content => {
                if (content.id === tabId) {
                    content.classList.add('active');
                } else {
                    content.classList.remove('active');
                }
            });

            // 特殊处理复习标签页
            if (tabId === 'review') {
                startReview();
            }
        }

        // 处理表单提交
        function handleFormSubmit(e) {
            e.preventDefault();
            
            const question = elements.questionInput.value.trim();
            const answer = elements.answerInput.value.trim();
            const category = elements.categoryInput.value.trim() || '未分类';
            
            if (!question || !answer) {
                alert('请填写问题和答案');
                return;
            }
            
            const id = Date.now().toString();
            const card = new KnowledgeCard(id, question, answer, category);
            
            state.cards.push(card);
            saveCards();
            
            // 重置表单
            elements.knowledgeForm.reset();
            
            // 更新UI
            renderManageTab();
            updateStats();
            
            alert('知识点已保存！');
        }

        // 开始复习
        function startReview() {
            // 过滤出需要复习的卡片（已掌握或未到复习时间的卡片不显示）
            const now = new Date();
            const dueCards = state.cards.filter(card => {
                return !card.mastered && new Date(card.nextReview) <= now;
            });
            
            if (dueCards.length === 0) {
                elements.noCardsMessage.style.display = 'block';
                elements.reviewCard.style.display = 'none';
                return;
            }
            
            elements.noCardsMessage.style.display = 'none';
            elements.reviewCard.style.display = 'block';
            
            // 随机选择一张卡片
            state.currentCardIndex = Math.floor(Math.random() * dueCards.length);
            const currentCard = dueCards[state.currentCardIndex];
            
            // 显示卡片
            elements.reviewQuestion.textContent = currentCard.question;
            elements.reviewAnswer.textContent = currentCard.answer;
            elements.reviewAnswer.style.display = 'none';
            
            // 重置按钮状态
            elements.showAnswerBtn.style.display = 'block';
            elements.nextCardBtn.style.display = 'none';
            elements.difficultyButtons.style.display = 'none';
            
            state.reviewMode = true;
        }

        // 显示答案
        function showAnswer() {
            elements.reviewAnswer.style.display = 'block';
            elements.showAnswerBtn.style.display = 'none';
            elements.difficultyButtons.style.display = 'flex';
        }

        // 下一个卡片
        function nextCard() {
            startReview();
        }

        // 评价卡片难度
        function rateCard(difficulty) {
            const now = new Date();
            const dueCards = state.cards.filter(card => {
                return !card.mastered && new Date(card.nextReview) <= now;
            });
            
            if (dueCards.length === 0) return;
            
            const currentCard = dueCards[state.currentCardIndex];
            const cardIndex = state.cards.findIndex(card => card.id === currentCard.id);
            
            if (cardIndex === -1) return;
            
            // 更新卡片数据
            state.cards[cardIndex].lastReviewed = now.toISOString();
            state.cards[cardIndex].reviewCount++;
            state.cards[cardIndex].difficulty = difficulty;
            
            // 根据难度设置下一次复习时间
            let nextReviewInterval = 1; // 默认1天
            
            switch(difficulty) {
                case 'easy':
                    nextReviewInterval = 3;
                    state.cards[cardIndex].correctCount++;
                    break;
                case 'medium':
                    nextReviewInterval = 2;
                    state.cards[cardIndex].correctCount++;
                    break;
                case 'hard':
                    nextReviewInterval = 1;
                    break;
            }
            
            // 如果正确次数达到3次，标记为已掌握
            if (state.cards[cardIndex].correctCount >= 3) {
                state.cards[cardIndex].mastered = true;
            }
            
            const nextReviewDate = new Date();
            nextReviewDate.setDate(nextReviewDate.getDate() + nextReviewInterval);
            state.cards[cardIndex].nextReview = nextReviewDate.toISOString();
            
            // 保存数据
            saveCards();
            updateStats();
            
            // 显示下一个按钮
            elements.nextCardBtn.style.display = 'block';
            elements.difficultyButtons.style.display = 'none';
        }

        // 渲染管理标签页
        function renderManageTab() {
            if (state.cards.length === 0) {
                elements.knowledgeList.innerHTML = '<div class="empty-state"><p>暂无知识点，请先添加一些知识点。</p></div>';
                return;
            }
            
            let html = '';
            
            state.cards.forEach(card => {
                html += `
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">${card.question}</div>
                            <div class="card-category">${card.category}</div>
                        </div>
                        <div class="card-content">
                            <p>${card.answer}</p>
                        </div>
                        <div class="card-actions">
                            <button class="danger" onclick="deleteCard('${card.id}')">删除</button>
                            <button onclick="resetCard('${card.id}')">重置进度</button>
                        </div>
                    </div>
                `;
            });
            
            elements.knowledgeList.innerHTML = html;
        }

        // 删除卡片
        function deleteCard(id) {
            if (confirm('确定要删除这个知识点吗？')) {
                state.cards = state.cards.filter(card => card.id !== id);
                saveCards();
                renderManageTab();
                updateStats();
                
                // 如果正在复习，重新开始复习
                if (state.reviewMode) {
                    startReview();
                }
            }
        }

        // 重置卡片进度
        function resetCard(id) {
            const cardIndex = state.cards.findIndex(card => card.id === id);
            if (cardIndex === -1) return;
            
            state.cards[cardIndex].lastReviewed = null;
            state.cards[cardIndex].nextReview = new Date().toISOString();
            state.cards[cardIndex].difficulty = 'medium';
            state.cards[cardIndex].reviewCount = 0;
            state.cards[cardIndex].correctCount = 0;
            state.cards[cardIndex].mastered = false;
            
            saveCards();
            renderManageTab();
            updateStats();
            
            alert('卡片进度已重置！');
        }

        // 更新统计信息
        function updateStats() {
            // 总卡片数
            elements.totalCards.textContent = state.cards.length;
            
            // 今日复习数
            const today = new Date().toDateString();
            const reviewedToday = state.cards.filter(card => {
                if (!card.lastReviewed) return false;
                return new Date(card.lastReviewed).toDateString() === today;
            }).length;
            elements.reviewedToday.textContent = reviewedToday;
            
            // 已掌握卡片数
            const masteredCards = state.cards.filter(card => card.mastered).length;
            elements.masteredCards.textContent = masteredCards;
            
            // 待复习卡片数
            const now = new Date();
            const dueCards = state.cards.filter(card => {
                return !card.mastered && new Date(card.nextReview) <= now;
            }).length;
            elements.dueCards.textContent = dueCards;
            
            // 分类统计
            const categoryStats = {};
            state.cards.forEach(card => {
                if (!categoryStats[card.category]) {
                    categoryStats[card.category] = {
                        total: 0,
                        mastered: 0
                    };
                }
                
                categoryStats[card.category].total++;
                if (card.mastered) {
                    categoryStats[card.category].mastered++;
                }
            });
            
            let categoryHtml = '';
            for (const category in categoryStats) {
                const stats = categoryStats[category];
                const masteryPercentage = stats.total > 0 ? Math.round((stats.mastered / stats.total) * 100) : 0;
                
                categoryHtml += `
                    <div style="margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                            <span>${category}</span>
                            <span>${stats.mastered}/${stats.total} (${masteryPercentage}%)</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${masteryPercentage}%"></div>
                        </div>
                    </div>
                `;
            }
            
            elements.categoryStats.innerHTML = categoryHtml || '<p>暂无分类数据</p>';
        }

        // 保存卡片到本地存储
        function saveCards() {
            localStorage.setItem('knowledgeCards', JSON.stringify(state.cards));
        }

        // 从本地存储加载卡片
        function loadCards() {
            const savedCards = localStorage.getItem('knowledgeCards');
            if (savedCards) {
                state.cards = JSON.parse(savedCards);
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>